<template>
	<uni-nav-bar left-icon="left" title="发布内容" :border="false" style="border-bottom: 1px solid #eee;" @clickLeft="back" />
  <view class="publish-page">
   
    <!-- 上传照片按钮 -->
    <button type="primary" class="upload-button" @click="selectPhotos">上传照片</button>
	
    <!-- 照片预览区域 -->
    <view class="preview" v-if="images.length">
      <view v-for="(imgUrl, index) in images" :key="index" class="image-preview">
        <image :src="imgUrl" class="preview-image" mode="aspectFill" />
        <button type="warn" class="delete-button" @click="removePhoto(index)">删除</button>
      </view>
    </view>
    <!-- 文字输入区域 -->
    <view class="input-area">
      <input type="text" v-model="text" placeholder="请输入文字描述" />
      <button type="primary" @click="publish">发布</button>
    </view>
    <!-- 已发布内容列表 -->
   <!-- <view class="published-list">
      <view v-for="(item, index) in publishedItems" :key="index" class="published-item">
        <view class="multi-images">
          <image v-for="(imgUrl, subIndex) in item.images" :key="subIndex" :src="imgUrl" class="published-image" mode="aspectFill" />
        </view>
        <text class="published-text">{{ item.text }}</text>
        <button type="primary" @click="updateItem(index)">更新</button>
        <button type="warn" @click="removeItem(index)">删除</button>
      </view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const db = uniCloud.database() //代码块为cdb



let images = ref([]); // 存储选择的照片URL数组
let text = ref(''); // 存储文字描述
let publishedItems = ref([]); // 存储已发布的内容
let currentEditIndex = ref(-1); // 当前编辑的索引

// 选择多张照片
function selectPhotos() {
  uni.chooseImage({
    count: 5, // 允许选择的照片数量
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths];
    }
  });
}

// 删除预览照片
function removePhoto(index) {
  images.value.splice(index, 1);
}

// 发布内容
function publish() {
  if (!images.value.length || !text.value.trim()) {
    uni.showToast({
      title: '请上传至少一张图片并填写文字描述',
      icon: 'none'
    });
    return;
  }
  const newItem = { images: images.value, text: text.value };
  if (currentEditIndex.value > -1) {
    // 更新已存在项
    publishedItems.value[currentEditIndex.value] = newItem;
  } else {
    // 添加新项
    publishedItems.value.push(newItem);
	db.collection('dynamic')
	.add(
		{
			
			master_iconSrc: "https://ts3.cn.mm.bing.net/th?id=OIP-C.Co0Nxxf5mpR0ssjeQ8mpTQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
			masterName: "我",
			publishTime: "2024-12-24",
			dymcContent: [
				{
					is_Text: true,
					Text: newItem.text,
					is_Images: true,
					Image: ["https://tse4-mm.cn.bing.net/th/id/OIP-C.cDBUlKleIv9zxp2b3lF2tgHaEG?w=263&h=180&c=7&r=0&o=5&pid=1.7"]
				}
			],
			likeNum: 0,
			is_like: false,
			is_focus: false,
			comment_IsOpen: false, 
			comment: [],
			commentId: 1,
			commentLength: 0,
			
		})
	uni.navigateBack({
		
		
	})
	
  }
  resetForm();
  uni.showToast({
    title: '发布成功',
    icon: 'success'
  });
}

// 删除已发布的内容
function removeItem(index) {
  publishedItems.value.splice(index, 1);
}

// 更新已发布的内容
function updateItem(index) {
  currentEditIndex.value = index;
  images.value = publishedItems.value[index].images;
  text.value = publishedItems.value[index].text;
}

// 重置表单
function resetForm() {
  currentEditIndex.value = -1;
  images.value = [];
  text.value = '';
}

function back() {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss">
	
.publish-page {
  padding: 20px;
  background-image: url('background.jpg'); // 指定背景图片
  background-size: cover; // 覆盖整个元素
  background-position: center; // 居中显示
  background-repeat: no-repeat; // 不重复
  text-align: center;

  .upload-button {
    margin: 20px 0;
    padding: 6px 10px;
    font-size: 12px;
  }

  .preview {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .image-preview {
    position: relative;
    .preview-image {
      width: 100px;
      height: 100px;
      border-radius: 5px;
    }
    .delete-button {
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 10;
      width: 16px;
      height: 16px;
      padding: 0;
      background-color: #ff0000;
      border-radius: 50%;
      color: white;
      line-height: 16px;
      text-align: center;
      font-size: 10px;
    }
  }

  .input-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;

    input {
      flex-grow: 1;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
      font-size: 16px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  }

  .published-list {
    .published-item {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      gap: 10px;

      .multi-images {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-right: 10px;

        .published-image {
          width: 100px;
          height: 100px;
          border-radius: 5px;
        }
      }

      .published-text {
        flex-grow: 1;
      }

      button {
        padding: 5px 10px;
      }
	
    }
  }
}
</style>